<template>
    <div style="margin-top:20px;">
        <Row :gutter="16">
            <Col span="24" style="font-size:14px;color:#697786;">动态辨识：{{mapObj.dynamicRiskTotal}}</Col>
        </Row>
        <Row :gutter="20" style="margin-top:10px;">
            <Col span="8" class="echarts-box">
                <div style="background-color: rgba(0, 59, 152, 0.02);">
                    <div class="typeSanBox" v-if="JSON.stringify(options4)=='{}'">
                        <span style="color:#697786;font-size:12px;font-weight:bold;position:absolute;top:3px;left:15px;">风险等级</span>
                        <div>
                            <img src="../../../assets/images/process-no-data.png" />
                            <span>暂无数据</span>
                        </div>
                    </div>
                    <v-chart v-else ref="e1" :style="{width:'100%',height: '360px',}" :options="options4" :auto-resize="true"></v-chart>
                </div>
            </Col>
            <Col span="8" class="echarts-box">
                <div style="background-color: rgba(0, 59, 152, 0.02);">
                    <div class="typeSanBox" v-if="JSON.stringify(options5)=='{}'">
                        <span style="color:#697786;font-size:12px;font-weight:bold;position:absolute;top:3px;left:15px;">风险类型</span>
                        <div>
                            <img src="../../../assets/images/process-no-data.png" />
                            <span>暂无数据</span>
                        </div>
                    </div>
                    <v-chart v-else ref="e2" :style="{width:'100%',height: '360px',}" :options="options5" :auto-resize="true"></v-chart>
                </div>
            </Col>
            <Col span="8" class="echarts-box">
                <div style="background-color: rgba(0, 59, 152, 0.02);">
                    <div class="typeSanBox" v-if="JSON.stringify(options6)=='{}'">
                        <span style="color:#697786;font-size:12px;font-weight:bold;position:absolute;top:3px;left:15px;">风险类别</span>
                        <div>
                            <img src="../../../assets/images/process-no-data.png" />
                            <span>暂无数据</span>
                        </div>
                    </div>
                    <v-chart v-else ref="e3" :style="{width:'100%',height: '360px',}" :options="options6" :auto-resize="true"></v-chart>
                </div>
            </Col>
        </Row>
    </div>
</template>
<script>
export default {
    props:['orgId','projectId','mapObj'],
    data(){
        return{
            options4:{},
            options5:{},
            options6:{},
        }
    },
    mounted(){
        window.addEventListener("resize", this.resizeTheChart)
    },
    methods:{
        resizeTheChart(){
            if (this.$refs.e1) {
                this.$refs.e1.resize()
            }
            if (this.$refs.e2) {
                this.$refs.e2.resize()
            }
            if (this.$refs.e3) {
                this.$refs.e3.resize()
            }
        },
        pieChart(obj){
            this.options4 = {}
            if(Object.keys(obj).length > 1){
                this.options4 = {
                    title: {
                        text: '风险等级',
                        subtext: '',
                        left: 'left',
                        textStyle:{
                            fontWeight:'bold',
                            color:'#697786',
                            fontSize:12
                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        type: 'scroll',
                        orient: 'vertical',
                        right: 10,
                        top: 80,
                        bottom: 20,
                        data: ['I级','II级','III级','IV级']
                    },
                    series: [
                        {
                            name: '风险等级',
                            type: 'pie',
                            radius: ['35%', '50%'],//设置饼图大小
                            center: ['40%', '50%'],//设置饼图位置
                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    show: true,
                                    textStyle: {
                                        fontSize: '0',
                                        fontWeight: 'bold'
                                    }
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data: [
                                {value: obj.level_one, name: 'I级',itemStyle:{color:"#FF5E5E"}},
                                {value: obj.level_two, name: 'II级', itemStyle:{color:"#FF9C58"}},
                                {value: obj.level_three, name: 'III级', itemStyle:{color:"#FFE558"}},
                                {value: obj.level_four, name: 'IV级', itemStyle:{color:"#6096D5"}},
                            ]
                        }
                    ]
                }
            }
        },
        pieChart1(obj){
            this.options5 = {}
            if(obj.length > 0){
                let legendData = [],colorArr = ['#5B8FF9','#5AD8A6','#5D7092','#F6BD16','#E8684A','#6DC8EC'],seriesData = []
                obj.forEach((e,index)=>{
                    let name = ''
                    name = e.name
                    let ob = {
                        value:e.count,
                        name:name,
                        itemStyle:{
                            color:colorArr[index]
                        }
                    }
                    legendData.push(name)
                    seriesData.push(ob)
                })
                this.options5 = {
                    title: {
                        text: '风险类型',
                        subtext: '',
                        left: 'left',
                        textStyle:{
                            fontWeight:'bold',
                            color:'#697786',
                            fontSize:12
                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        type: 'scroll',
                        orient: 'vertical',
                        right: 10,
                        top: 80,
                        bottom: 20,
                        data: legendData,
                        formatter: function (name) {
                            if (name.length > 4) {
                                name =  name.slice(0,3) + '...';
                            }
                            return name
                        },
                    },
                    series: [
                        {
                            name: '风险类型',
                            type: 'pie',
                            radius: ['35%', '50%'],//设置饼图大小
                            center: ['40%', '50%'],//设置饼图位置
                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    show: true,
                                    textStyle: {
                                        fontSize: '0',
                                        fontWeight: 'bold'
                                    }
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data: seriesData
                        }
                    ]
                }
            }
        },
        pieChart2(obj){
            this.options6 = {}
            if(obj.length > 0){
                let legendData = [],colorArr = ['#5B8FF9','#5AD8A6','#5D7092','#F6BD16','#E8684A','#6DC8EC'],seriesData = []
                obj.forEach((e,index)=>{
                    let name = ''
                    name = e.categoryName
                    let ob = {
                        value:e.count,
                        name:name,
                        itemStyle:{
                            color:colorArr[index]
                        }
                    }
                    legendData.push(name)
                    seriesData.push(ob)
                })
                this.options6 = {
                    title: {
                        text: '风险类别',
                        subtext: '',
                        left: 'left',
                        textStyle:{
                            fontWeight:'bold',
                            color:'#697786',
                            fontSize:12
                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        type: 'scroll',
                        orient: 'vertical',
                        right: 10,
                        top: 80,
                        bottom: 20,
                        data: legendData,
                        formatter: function (name) {
                            if (name.length > 4) {
                                name =  name.slice(0,3) + '...';
                            }
                            return name
                        },
                    },
                    series: [
                        {
                            name: '风险类别',
                            type: 'pie',
                            radius: ['35%', '50%'],//设置饼图大小
                            center: ['40%', '50%'],//设置饼图位置
                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    show: true,
                                    textStyle: {
                                        fontSize: '0',
                                        fontWeight: 'bold'
                                    }
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data: seriesData
                        }
                    ]
                }
            }
        }
    }
}
</script>